@section('css')
    <link rel="stylesheet" type="text/css" href="/admin/lib/datatables/dataTables.css"/>
@endsection
@extends('admin.common.main')

@section('content')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 文章中心 <span
            class="c-gray en">&gt;</span> 文章管理 <a class="btn btn-success radius r"
                                                      style="line-height:1.6em;margin-top:3px"
                                                      href="javascript:location.replace(location.href);" title="刷新"><i
                class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="page-container">
        <form action="{{route('admin.role.index')}}" method="get">
            <div class="text-c"> 文章名称：
                <input type="text" class="input-text" style="width:250px" placeholder="输入角色名称" id=""
                       name="name">
                <button type="submit" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i>
                    搜文章
                </button>
            </div>
        </form>
        <div class="cl pd-5 bg-1 bk-gray mt-20"><span class="l"><a href="javascript:;" onclick="datadel()"
                                                                   class="btn btn-danger radius"><i
                        class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
                <a href="{{route('admin.article.create')}}" class="btn btn-primary radius"><i
                        class="Hui-iconfont">&#xe600;</i> 添加文章</a></span>

            <a href="{{route('admin.article.export')}}" class="btn btn-warning radius"><i
                    class="Hui-iconfont">&#xe600;</i> 导出文章</a></span>
        </div>
        <div class="mt-20">
            <table class="table table-border table-bordered table-hover table-bg table-sort">
                <thead>
                <tr class="text-c">
                    <th width="25"><input type="checkbox"></th>
                    <th width="80">ID</th>
                    <th width="100">文章标题</th>
                    <th width="100">文章描述</th>
                    <th width="100">文章封面</th>
                    <th width="100">作者</th>
                    <th width="130">加入时间</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($data as $val)
                    <tr class="text-c">
                        <td><input type="checkbox" value="" name="id[]"></td>
                        <td>{{$val['id']}}</td>
                        <td>{{$val['title']}}</td>
                        <td>{{$val['desn']}}</td>
                        <td><img src="{{$val['pic']}}" width="100" height="100"></td>
                        <td>{{$val['author']}}</td>
                        <td>{{$val['created_at']}}</td>
                        <td class="td-manage">
                            <a title="编辑" href="{{route('admin.article.edit',['id'=>$val['id']])}}" class="label label-primary radius">编辑</a>
                            <a title="删除" href="{{route('admin.article.destroy',['id'=>$val['id']])}}" class="label label-danger radius delbtn">删除</a>
                        </td>
                    </tr>
                @endforeach

                </tbody>
            </table>
            {{$data->links()}}

        </div>

        @endsection

        @section('js')

            <script type="text/javascript" src="/admin/lib/datatables/dataTables.js"></script>

            <script>

                $('.table-sort').dataTable({
                    "serverSide": true,
                    "ajax": "{{route('admin.article.index')}}",
                    columns: [
                        {
                            data: '', render: function () {
                                return '<input type="checkbox" value="" name="id[]">'
                            }
                        },
                        {data: 'id'},
                        {data: 'title'},
                        {data: 'desn'},
                        {
                            data: 'pic', render: function (data, type, row) {
                                //tab键盘上方的``  变量渲染要用${}
                                return `<img src="${data}" alt="无图" width="100" height="100">`;
                            }
                        },
                        {data: 'author'},
                        {data: 'created_at'},
                        {
                            data: '', render: function () {
                                return `<a title="编辑" href="" class="label label-primary radius">编辑</a>
                                <a title="删除" href=""
                                   class="label label-danger radius delbtn">删除</a>`;
                            }
                        },
                    ]
                });
            </script>
@endsection

